<template>
  <div class="overtrue">
    <el-row>
      <div class="image-container">
        <img :src="require('@/assets/images/cover.png')" alt="Cover Image">
      </div>
    </el-row>
    <el-row class="stats-row">
      <el-col :span="8" v-for="(item, index) in statsData" :key="index">
        <div class="stat-item">
          <i :class="item.icon"></i>
          <div class="number">{{ item.number }}</div>
          <div class="description">{{ item.description }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {//变量区
      statsData:[
        { icon: 'el-icon-user-solid', number: '11871', description: '累计登录次数' },
        { icon: 'el-icon-user', number: '1449', description: '学生人数' },
        { icon: 'el-icon-s-custom', number: '61', description: '教师人数' },
        { icon: 'el-icon-reading', number: '31', description: '课程数量' },
        { icon: 'el-icon-tickets', number: '556', description: '选题数量' },
        { icon: 'el-icon-folder', number: '2641', description: '实验项目' }
      ]
    };
  },
  methods: {//函数区
  }
};
</script>

<style scoped lang="scss">
.overtrue{
  width: 100%;
  height:100%;
  padding: 1.5%;
}
.image-container {
  width: 100%; /* 设置容器宽度 */
  height: 40%; /* 设置容器高度 */
  /* 设置容器的位置，可以使用 flex 布局或者定位 */
  display: flex;
  justify-content: center; /* 居中 */
  align-items: center; /* 居中 */
  /* 或者使用定位 */
  /* position: relative; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
}

.image-container img {
  width: 100%; /* 设置图片宽度为容器宽度的100% */
  height: auto; /* 让图片按比例缩放 */
}
.stats-row .stat-item {
  text-align: center;
  margin-top: 70px;
}

.stats-row i {
  font-size: 24px; /* 图标大小 */
  margin-bottom: 8px;
}

.number {
  font-size: 20px; /* 数字大小 */
  color: #333;
}

.description {
  font-size: 16px; /* 文字描述大小 */
  color: #666;
}
</style>

